<template>
  <div class="schoolCalendar">
    <!-- //TODO:最后设置背景色 -->
    <div class="background">
      <div class="schoolLogo">
      <img src="./images/schoolLogo.png"></div>
      <div class="schoolMotto">
      <img src="./images/schoolMotto.png"></div>
      <div class="twinTowers">
      <img src="./images/twinTowers.png"></div>
    </div>
    <div class="navBar">
      <div class="nav  firstSemester" :class="!isSwitch?'showOn':'showOff'" @click="switchTo(1)">
        <p>{{calendar[0].description}}</p>
        <p>第一学期</p>
      </div>
      <div class="nav secondSemester" :class=" isSwitch?'showOn':'showOff'" @click="switchTo(2)">
        <p>{{calendar[0].description}}</p>
        <p>第二学期</p>
      </div>
    </div>
    <div class="calendarBox" :class=" !isSwitch?'showFirst':'showSecond'">
      <div v-for="(calendar, index) in calendar" :key="index" class="calendar">
        <div class="header" style="flex: 1">
          <div class="month">月份</div>
          <div class="week"> 周次</div>
          <div class="dayBox">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>七</div>
          </div>
        </div>
        <div v-for="(month, index) in calendar.month" :key="index" class="month" :style="{flex: calendar.month[index].flex}">
          <div class="monthInfo">{{month.description}}</div>
          <div class="weekBoxs">
            <div v-for="(week, index) in month.week" :key="index" class="weekBox" :class="month.week[index].isSpecial?'special':''">
              <div class="weekInfo">
                {{week.description}}
                <div v-if="week.isSpecial == true">
                  {{week.specialDescription}}
                </div>
              </div>
              <div v-for="(day, index) in week.day" :key="index" class="dayInfo" :class="(week.day[index]!=null)&&(week.day[index].isSpecial)?'special':''">
                {{day!=null?day.day:""}}
                <div v-if="day!=null && day.isSpecial == true">
                  {{day.specialDescription}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.schoolCalendar {
  height: 100%;
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  
  .background {
    z-index: 1;
    position: absolute;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-rows: 20% 30% 50%;
    overflow: hidden;

    .schoolLogo  {
      width: 20%;
    }
    .schoolMotto {
      width: 30%;
    }
    .twinTowers {
      width: 300%;
    }
    
    div {
    display: flex;
    justify-content: center;
    align-items: center;
      img {
        width: 100%;
      }
    }
  }
  .navBar {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2ba054;

    .nav {
      flex: 1;
      display: grid;
      justify-content: center;
      align-items: center;
      margin-bottom: 2px;

      p {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .showOn  {
      background-color: #e1f9ec;
      color: #45aa68;

      &.firstSemester {
        border-radius: 0 50px 0 0;
        margin-right: -10%;
      }

      &.secondSemester {
        border-radius: 50px 0 0 0;
        margin-left: -10%;
      }
    }
    .showOff {
      color: #4f4f4f;
    }
  }
  .calendarBox {
    z-index: 2;
    background-color: rgba($color:  #e1f9ec, $alpha: 0);
    width: 200%;
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding-top: 5px;

    &.showFirst {
      margin-left: 0%;
    }
    &.showSecond {
      margin-left: -100%;
    }

    .calendar {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      font-size: 16px;
      margin: 0 3px;

      .header {
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 15% 15% 70%;

        &>div {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2px 5px;
          margin: 0 2px;
          background-color: rgba($color:#cfe7d7, $alpha: 0.8);
          border-radius: 8px;
        }

        .dayBox {
          display: flex;

          &>div {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1
          }
        }
      }

      &>.month {
        display: grid;
        justify-content: center;
        align-items: center;
        margin: 2px;
        background-color: rgba($color:#cfe7d7, $alpha: 0.5);
        border-radius: 8px;
        grid-template-columns: 15% 85%;

        .monthInfo {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .weekBoxs {
          height: 100%;
          display: flex;
          flex-direction: column;

          .weekBox {
            flex: 1;
            margin: 1px 0;
            display: grid;
            grid-template-columns: 18% repeat(7,11.5%);

            &.special .weekInfo{
              color: red;
              margin-top: -15px;

              div {
                position: absolute;
                display: flex;
                font-size: 12px;
                transform:scale(0.8,0.8);
                margin-bottom: -30px;
              }
            }

            .weekInfo {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
            }

            .dayInfo {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;

              &.special {
              color: red;
              margin-top: -15px;

                div {
                  display: flex;
                  justify-content: center;
                  width: 50px;
                  position: absolute;
                  font-size: 12px;
                  transform:scale(0.8,0.8);
                  margin-bottom: -30px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<script>
export default {
  name: 'schoolCalendar',
  props: {},
  data() {
    return {
      calendar:[
      this.fixSchoolCalendar(this.getCalendar("2020-9-7" , "2021-1-24", '上')),
      this.fixSchoolCalendar(this.getCalendar("2021-2-22", "2021-7-11", '下'))
      ],
      isSwitch: false
    }
  },
  computed: { //计算属性缓存
  },
  methods:  { //方法
    fixSchoolCalendar: function(calendar) {    //自定义修改时间表
      var This = this
      var fD = function(date, description) { //fD('10-1', '国庆节')  十月一号国庆节
        return This.fixDay(date, description, calendar)
      }
      var fW = function(date, description) { //fW('1-20', '实践周')  十月一日实践周
        return This.fixWeek(date, description, calendar)
      }
      var fW2 =function(date, description, content) { //fW('2-1', '', 'display: hidden')
        var week = This.fixWeek(date, description, calendar)
        week.description = content
        return week
      }
      if(calendar.semester == '上')  { //上学期
        fD('9-7','注册')
        fD('9-8','注册')
        fD('9-14','老师上课')
        fD('9-19','新生报到')
        fD('9-20','')
        fD('10-1','中秋国庆')
        fD('10-30','教资考证')
        fD('12-5','计算机等级考试')
        fD('12-24','四六级')
        fD('1-1','元旦')
        fD('1-11','复考')
        fD('1-23','放假')
        fW('1-20','实践教学周')
      }
      else                           { //下学期
        fD('2-26','元宵')
        fD('2-27','注册')
        fD('2-28','')
        fD('3-1','上课')
        fD('4-4','清明节')
        fD('5-1','劳动节')
        fD('5-4','青年节')
        fD('6-14','端午节')
        fD('6-21','复考')
        fD('7-10','放假')
        fW('6-18','实践教学周')
        fW('7-18','实践教学周')
        fW('7-19','实践教学周')
        fW2('2-1','','')
      }
      return calendar
    },
    getCalendar: function(startDate, endDate, semester) {//解析起末时间得到时间表
      //解析时间
      var year = eval(endDate.split('-')[0])
      var dayOfMonth = [31, year%4==0&&year%100!=0||year%400==0?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      // var dayList = new Array(this.dateDiff(startDate, endDate))
      var dayList = []
      var month = eval(startDate.split('-')[1]), day = eval(startDate.split('-')[2])
      //获取包含所有天数的一个列表
      for(var i=0; i<=this.dateDiff(startDate, endDate) ; i++) {
        dayList.push({
          month: month,
          week: Math.ceil((i+1)/7),
          indexOfWeek: i%7,
          day: day,
          isSpecial: false,
          specialDescription: ''
        })
        if(++day > dayOfMonth[month-1]) {
          day = 1
          if(++month > 12) month = 1;
        }
      }
      //导出 月->星期->天
      var calendar = {
        description:"",
        month: []
      }
      var calendarMonth = []
      var calendarWeek = []
      var calendarDay = {}
      month      = eval(startDate.split('-')[1])
      var week   = 0
      day        = eval(startDate.split('-')[2])
      var totalMonth = dayList[dayList.length-1].month - dayList[0].month + 1 + (dayList[dayList.length-1].month > dayList[0].month? 0: 12)
      dayList.reverse()
      for(i=0; i<totalMonth; i++) {
        var j = 0
        var flex = 0
        while(dayList[dayList.length-1] != null && dayList[dayList.length-1].month == month) {
          if(calendarWeek.length == 0 || calendarWeek[j-1].day[6] != null) {
            calendarWeek.push({
              description: this.SectionToChinese(++week),
              index:week,
              day:new Array(7),
              style: ''
            })
            calendarWeek[j++].day[6] = null
            flex ++
          }
          calendarDay = dayList.pop()
          calendarWeek[j-1].day[calendarDay.indexOfWeek] = calendarDay
        }
        calendarMonth.push({
          description: this.SectionToChinese(month) + '月',
          flex: flex,
          index: month,
          week: calendarWeek
        })
        calendarWeek = new Array()
        month = month == 12? 1: month+1
        week --
      }
      calendar.description = startDate.split('-')[0] + '-' + endDate.split('-')[0] + '学年'
      calendar.semester = semester
      calendar.month = calendarMonth

      return calendar
    },
    dateDiff:function (startDate, endDate){        //计算两日之差
      var aDate, oDate1, oDate2, iDays
      aDate = startDate.split("-")
      oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) 
      aDate = endDate.split("-")
      oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 /24)
      return iDays
    },
    SectionToChinese:function (section) {          //转换中文
      var chnNumChar = ["","一","二","三","四","五","六","七","八","九"];
      var chnUnitChar = ["","十"];
      return section>=20?'二十':'' + chnUnitChar[Math.floor(section/10)] + chnNumChar[section%10];
      },
    switchTo:function (semester) {                 //事件:点击 -> 切换学期
      if(semester == 1 && this.isSwitch == true)  this.isSwitch = false
      if(semester == 2 && this.isSwitch == false) this.isSwitch = true
    },
    fixDay:function (date, description, calendar) {//修改某天信息
      var day = this.seekDay(date, calendar)
      day.isSpecial = true
      day.specialDescription = description
    },
    fixWeek:function(date, description, calendar) {//修改某周信息
      var week = this.seekWeek(date, calendar)
      week.isSpecial = true
      week.specialDescription = description
      return week
    },
    seekDay:function (date, calendar) {            //寻找某天
      var month = eval(date.split('-')[0])
      var day   = eval(date.split('-')[1])
      for(let monthOfCalendar in calendar.month) {
        monthOfCalendar = calendar.month[monthOfCalendar]
        if(monthOfCalendar.index == month) {
          for(let weekOfMonth in monthOfCalendar.week) {
            weekOfMonth = monthOfCalendar.week[weekOfMonth]
            for(let dayOfweek in weekOfMonth.day) {
              dayOfweek = weekOfMonth.day[dayOfweek]
              if(dayOfweek.day == day) 
              return dayOfweek
            }
          }
        }
      }
      return null
    },
    seekWeek:function (date, calendar) {           //寻找某周
      var month = eval(date.split('-')[0])
      var week  = eval(date.split('-')[1])
      for(let monthOfCalendar in calendar.month) {
        monthOfCalendar = calendar.month[monthOfCalendar]
        if(monthOfCalendar.index == month) {
          for(let weekOfMonth in monthOfCalendar.week) {
            weekOfMonth = monthOfCalendar.week[weekOfMonth]
            if(weekOfMonth.index == week) 
            return weekOfMonth
          }
        }
      }
      return null
    }
  },
  watch:    { //监听  

  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    // this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    return
  }
}
</script>
